<template>
	<div class="commentUser">
    <div class="answer-wrap">
      <div class="answer-wrap-item" v-for="item in commentUser">
        <div class="answer-user">
          <div class="answer-user-left">
            <img :src="item.head_img" alt="">
          </div>
          <div class="answer-user-right">
            <div class="name">{{ item.nickname }}</div>
            <div class="time">{{ item.create_time }}</div>
          </div>
        </div>
        <div class="answer-info">
          {{ item.comment }}
        </div>
        <div class="answer-operate" v-if="false">
          <div class="btn" @click="JumpName('question-comment',{id:111})">
          </div>
          <div class="btn">
            <em class="zan"></em>
            <span v-if="item.like_num == 0">有用</span>
            <span v-else>{{ item.like_num }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import Vue from 'vue'
  export default Vue.extend({
    name: 'index',
    props: {
      commentUser: {
        type: Array
      }
    },
    methods: {
      /**
       * 链接跳转
       */
      JumpName(url, data) {
        this.$JumpName(this, url, data)
      }
    }
  })
</script>

<style lang="scss">
  .commentUser{
    .answer-wrap{
      &-item{
        padding: 30px 0;
        border-bottom: 1px solid #EDEDED;
        &:last-child{
          border-bottom: none;
        }
        .answer-user{
          font-size: 0;
          &-left{
            width: 70px;
            height: 70px;
            display: inline-block;
            vertical-align: top;
            border-radius: 50%;
            overflow: hidden;
            box-shadow: 0 1px 10px #eee;
            margin-right: 20px;
            img{
              width: 100%;
              height: 100%;
            }
          }
          &-right{
            vertical-align: top;
            display: inline-block;
            font-size: 22px;
            color: #999;
            .name{
              color: #333;
              font-weight: bold;
              font-size: 26px;
              line-height: 36px;
              margin-bottom: 4px;
            }
          }
        }
        .answer-info{
          margin: 20px 0;
          color: #333;
          font-size: 26px;
          line-height: 40px;
        }
        .answer-operate{
          text-align: right;
          .btn{
            display: inline-block;
            margin-left: 50px;
            padding-top: 40px;
            em{
              display: inline-block;
              width: 28px;
              height: 26px;
              vertical-align: -2px;
              margin-right: 10px;
              &.comment{
                background:url(https://img.wifenxiao.com/h5-wfx/images/item/question/icon_comment.png) bottom no-repeat;
                background-size:100% 100%;
              }
              &.zan{
                background:url(https://img.wifenxiao.com/h5-wfx/images/item/question/icon_zan.png) bottom no-repeat;
                background-size:100% 100%;
              }
              &.zan2{
                background:url(https://img.wifenxiao.com/h5-wfx/images/item/question/icon_zan2.png) bottom no-repeat;
                background-size:100% 100%;
              }
            }
          }
        }
      }
    }
  }
</style>
